<template>
  <el-table
    :data="tableData"
    border
    :header-cell-style="getRowClass"
    :row-class-name="tableRowClassName"
    style="width: 100%"
  >
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50"
    />

    <el-table-column
      v-for="(item,index) in tableCol"
      :key="index"
      align="center"
      :prop="item.key"
      :label="item.title"
    >
      <template slot-scope="scope">
        <!-- 实验系统 -->
          <span v-if="item.key=='status'">{{ scope.row[item.key]=='0'?'正常':'禁用' }}</span>
          <span v-if="item.key=='state'">{{ scope.row[item.key]=='1'?'正常':'禁用' }}</span>
          <span v-else-if="item.key=='trialState'">{{ scope.row[item.key]=='0'?'等待试验':scope.row[item.key]=='1'?'试验中':"试验结束" }}</span>
          <span v-else-if="item.key=='firmId'">{{ scope.row[item.key]=='0'?'脏数据':'脏数据' }}</span>
          <span v-else>{{ scope.row[item.key] }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="btnIsShow.operate"
      prop=""
      label="操作"
      min-width="120"
      :width="width"
      align="center"
    >
      <template slot-scope="scope">
        <div class="tableAutoBtn">
          <el-button v-show="btnIsShow.detile" size="mini" type="text" @click="getDetile(scope.row)">查看详情</el-button>
          <el-button v-show="btnIsShow.update==undefined?true:btnIsShow.update" type="text" size="mini" :disabled="scope.row['trialState']==2" @click="edit(scope.row)">修改</el-button>
          <el-popconfirm v-show="btnIsShow.del" title="确定删除吗？" icon-color="#f00" @confirm="deleteRow(scope.row)">
            <el-button slot="reference" size="mini" type="text">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import htmixin from '@/mixins/htmixin.js'
import MiddleUtil from '@/utils/MiddleUtil'
export default {
  components: {

  },
  mixins: [htmixin],
  props: {
    width:{
      type: String,
      default:'180',
      required: false
    },
    height:{
      type: String,
      default:'600',
      required: false
    },
    btnIsShow: {
      type: Object,
      default: () => {
        return {
          detile: false,
          operate: true,
          del: true,
          power: false
        }
      },
      required: false
    },
    tableData: {
      type: Array,
      default: [],
      required: true
    },
    tableCol: {
      type: Array,
      default: [],
      required: true
    }
  },
  data() {
    return {
       
    }
  },
  created() {
    MiddleUtil.$on('closeLoading', () => {
        this.loading = false
    })
  },
  methods: {
    getData(v){
      this.$parent.showGetData(v)
    },
    execute(v,type){
      this.$parent.executeFun(v,type)
    },
    getDetile(v) {
      this.$emit('getDataDetileInfo', JSON.stringify(v))
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warningRow'
      } else {
        return ''
      }
    },
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
      }
    },
    messageFun(v) {
      if (v.code == 200) {
        this.$emit('refresh')
        this.$message.success(v.msg)
      } else {
        this.$message.error(v.msg)
      }
    },
    deleteRow(v) {
      this.$emit('deleteSelectData', v)
    },
    sendDemo(v) {
      this.$emit('sendData', v)
    },
    roleDistribution(v) {
      this.$emit('roleDist', JSON.stringify(v))
    },
    edit(row) {
      this.$parent.editRowData(JSON.stringify(row))
    },
    queryData(callback, parame, colList) {
      this.tableCol = colList
      callback(parame).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  >>>.warningRow {
    background: #f2f5f8;
  }
  >>>.el-button{
    margin: 0 5px;
  }
  </style>
